<template>
  <a-tree-select
    :allowClear="allowClean"
    :placeholder="placeholder"
    :showSearch="true"
    :treeData="treeData"
    :treeDefaultExpandAll="true"
    treeNodeFilterProp="title"
    :value="stateValue" @change="onChange">
  </a-tree-select>
</template>

<script>
  import {getAction} from '../../api/manage';

  export default {
    name: "AkTreeSelect",
    props: {
      url: String,
      defaultFirst:{
        type:Boolean,
        required:false,
        default:false,
      },
      placeholder: {
        type: String,
        required:false,
        default:"请选择"
      },
      allowClean:{
        type: Boolean,
        required:false,
        default:true
      },
      value:{
        type: String,
        required: false
      },

    },
    data() {
      return {
        treeData: [],
        stateValue:''
      }
    },
    mounted() {
      //获取字典数据
      this.initData();
      this.stateValue = this.value;
    },

    methods: {
      initData() {
        this.initTreeData(this.url);
      },
      initTreeData(url){
        if(url || this.url){

          getAction(url||this.url).then((res) => {
            if (res.success) {
              this.treeData = res.result;
              if(this.treeData.length>0 && this.defaultFirst && !this.stateValue){
                this.stateValue=this.treeData[0].value;
                this.onChange(this.stateValue);
              }
            }
          })
        }else{
          this.treeData = [];
        }
      },
      onChange(value, label, extra) {
        this.$emit('change', value);
        this.stateValue=value;
      },
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    watch:{
      value: function value(val) {
        this.stateValue = val;
      },
      url: function (val) {
        this.initTreeData(val);
      }
    }
  }
</script>

<style scoped>
</style>
